<template>
  <el-table
    ref="treeTable"
    v-loading="loading"
    :data="treeData"
    style="width: 100%;"
    height="100%"
    border
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    row-key="vid"
    default-expand-all
    highlight-current-row
    :row-style="{cursor: 'pointer'}"
    class="taskNoticeTable"
    @select="handleSelectionChange"
    @row-click="rowClickFun"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="nodeName" label="任务名称" show-overflow-tooltip width="200">
      <template slot-scope="{row}">
        <!-- {{row['nodeName']}}-{{row.level}} -->
        <div :style="{textIndent:(row.level*20)+'px'}">{{ row['nodeName'] }}</div>
      </template>
    </el-table-column>
    <el-table-column label="任务关系" width="160">
      <template slot-scope="{row}">
        <!-- <span>{{changeLabel(row.noticeUsers)}}</span> -->
        <span>{{ changeLabel(row.noticeUsers) }}</span>
      </template>
    </el-table-column>
    <el-table-column v-for="item in columsData" :key="item.prop" :label="item.label" :prop="item.prop">
      <template slot-scope="{row}">
        <!-- <span>{{row.disableREPORT}}</span> -->
        <el-switch
          v-model="row[item.prop]"
          active-value="1"
          inactive-value="0"
          size="mini"
          :disabled="!row.id&& row.id===null||row['disable'+item.prop]"
          @change="changeFun(row,item.prop)"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// import { saveItemState } from "@/api/portalTaskUi/taskNotice";
import { getDictType } from '@/api/portalTaskUi/taskList'
import { getSysTreeList, saveByIsRemind } from '@/api/portalTaskUi/taskNotice'
const fixStatus = 'disable'
export default {
  name: 'TaskNoticeTreeTable',
  inject: ['root'],
  props: {
    // treeData: {
    //   type: Array,
    //   default: () => []
    // }
  },
  data() {
    return {
      columsData: [
        { prop: 'isRemind', label: '是否通知', disabled: false },
        { prop: 'weChat', label: '微信通知', disabled: false },
        { prop: 'pc', label: 'pc通知', disabled: false },
        { prop: 'REPORT', label: '是否汇报', disabled: false },
        { prop: 'COMPLETE_APPLY', label: '申请完成', disabled: false },
        { prop: 'DELAY_APPLY', label: '申请延期', disabled: false },
        { prop: 'TERMINATE_APPLY', label: '申请终止', disabled: false },
        { prop: 'RELAY_APPLY', label: '申请转交', disabled: false },
        { prop: 'TASK_TERMINATE', label: '任务终止', disabled: false },
        { prop: 'TASK_ATTENTION', label: '任务关注', disabled: false },
        { prop: 'TASK_SEPARATE', label: '任务分解', disabled: false },
        { prop: 'PERSON_REPLACE', label: '人员替换', disabled: false },
        { prop: 'DETAILS_CHANGE', label: '详情变动', disabled: false }
      ],
      multipleSelection: [], // 选择的数据
      statusData: [], // 是否能点击的状态格
      mapData: [], // 任务类型集合
      currentId: '', // 当前租户id
      treeData: [],
      fixStatus, // 可否点击的前缀
      loading: false // table加载状态
    }
  },
  async created() {
    this.mapData = await this.getDictTypeFun('task_relation') // 设置类型字典
    console.log(this.$route)
    // let params = {
    //   tenantId: this.root.currentId,
    //   isSystemConfig: this.root.usersId === "1" ? "1" : "0"
    // };
    // this.currentId = this.root.currentId;
    // let treeData = await this.getSysTreeListFun(params);
    // let targetData = this.columsData.filter(v => v.prop !== "isRemind").map(v => v.prop);
    // console.log(this.setDisableStatus(this.treeData, targetData));
    // this.treeData = this.setDisableStatus(treeData, targetData);
  },
  methods: {

    // 点击当前行
    rowClickFun(row) {
      this.$refs.treeTable.clearSelection()
      if (this.multipleSelection.length === 0) {
        this.$refs.treeTable.toggleRowSelection(row, true)
        this.multipleSelection = [row]
      } else {
        const isHave = this.multipleSelection.some(v => v.vid === row.vid) // 判断是否存在选中的数组里面
        if (isHave) {
          this.$refs.treeTable.toggleRowSelection(row, false)
          this.multipleSelection = []
        } else {
          this.$refs.treeTable.toggleRowSelection(row, true)
          this.multipleSelection = [row]
        }
      }
    },

    // 获取树的数据
    getSysTreeListFun(params) {
      this.loading = true
      return new Promise((resolve, reject) => {
        getSysTreeList(params).then(res => {
          if (res.data.code === 0) {
            const notArr = ['isRemind']
            const targetData = this.columsData.filter(v => !notArr.includes(v.prop)).map(v => v.prop)
            const data = res.data.data
            this.treeData = this.setDisableStatus(data, targetData)
            resolve(data)
          } else {
            this.treeData = []
            resolve([])
          }
          this.loading = false
        })
      })
    },
    // 设置初始状态
    setDisableStatus(treeData, targetData) {
      if (!treeData || !treeData.length) {
        return
      }
      treeData.forEach(v => {
        targetData.forEach(s => {
          v[fixStatus + s] = v.isRemind !== '1'
        })
        if (v.children && v.children.length > 0) {
          this.setDisableStatus(v.children, targetData)
        }
        // v[fixStatus + v] = node.isRemind === "1";
      })
      return treeData
    },
    // 处理勾选的情况
    handleSelectionChange(val, row) {
      this.$refs.treeTable.clearSelection()
      if (val.length === 0) {
        this.multipleSelection = []
      } else {
        this.$refs.treeTable.toggleRowSelection(row, true)
        this.multipleSelection = [row]
      }
    },
    changeFun(row, prop) {
      console.log(row)
      if (!row.id || row.id === null && row['disable' + prop]) {
        this.$message({
          message: '无法操作,请先新增对应关系!',
          type: 'error'
        })
        return
      }
      if (prop === 'isRemind') { // 点击是否通知
        const notArr = ['isRemind']
        const targetData = this.columsData.filter(v => !notArr.includes(v.prop)).map(v => v.prop)
        targetData.forEach(s => {
          this.$set(row, fixStatus + s, row[prop] !== '1')
          if (row[prop] === '0') {
            this.$set(row, s, '0')
          } else if (row[prop] === '1') {
            const showKey = ['weChat', 'pc']
            showKey.forEach(v => {
              this.$set(row, v, '1')
            })
          }
        })
      }

      const data = {
        configId: row.id,
        isRemind: row[prop],
        noticeUsers: row.noticeUsers,
        noticeType: prop,
        isSystemConfig: this.root.isSystemConfig,
        tenantId: this.root.currentId
      }
      saveByIsRemind(data).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
        }
      })
    },
    // 转换label文字
    changeLabel(value) {
      const target = this.mapData.find(v => v.value === value) || {}
      return target.label || ''
    },
    // 获取类型的字典
    getDictTypeFun(params) {
      // 字典名称
      return new Promise(resolve => {
        getDictType(params).then(res => {
          resolve(res.data.data)
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.taskNoticeTable{
  /deep/.el-table__header{
      .el-checkbox{
        display:none;
      }
    }
}
</style>
